<template>
	<!-- 加载规划销售人员维护的项目下的设备信息对话框 -->
	<div>
		<v-dialog v-model="projectComment.dialog" width="1400">
			<v-card>
				<v-card-title>选择项目</v-card-title>
				<v-card-text>
					<v-row class="mt-2">
						<v-col cols="12" sm="3" md="2">
							<v-text-field label="项目号" v-model="query.citemcode" dense outlined>
							</v-text-field>
						</v-col>
						<v-col cols="12" sm="3" md="2">
							<v-text-field label="项目名称" v-model="query.citemname" dense outlined>
							</v-text-field>
						</v-col>
						<!-- ml-n16 前面加n是间距 -->
						<!-- class="ml-n16 mx-auto" -->
						<v-col cols="12" sm="3" md="2">
							<v-btn depressed color="primary" @click="loadPages">查询</v-btn>
							<v-btn class="ml-3" depressed color="primary" @click="refreshLoadPages">
								重置</v-btn>
						</v-col>
					</v-row>

					<v-data-table :headers="projectDataHeaderList" :items="projectDataList" small fixed-header item-key="id"
						dense show-select single-select class="text-no-wrap" loading-text="正在加载请稍等......"
						:footer-props="vuetifyDefaultPage" @item-selected="projectSingleCheckEvent">
					</v-data-table>
				</v-card-text>
				<v-card-actions>
					<v-spacer></v-spacer>
					<v-btn color="primary" class="mr-4" small tile :disabled="this.selectprojectModel==null" @click="ok">确定
					</v-btn>
					<v-btn color="warning" class="mr-4" small tile @click="close">取消</v-btn>
				</v-card-actions>
			</v-card>
		</v-dialog>
	</div>
</template>

<script>
	export default {
		name: 'ProjectDataList',
		props: {
			callBack: {
				type: Function, //参数类型：函数
			},
			projectComment: {
				dialog: false,
				loadprojectUrl: ``
			},
		},
		data: () => ({
			query: {
				citemcode: '',
				citemname: '',
			},
			projectDataHeaderList: [
				{
						text: '项目号',
						align: 'center',
						value: 'citemcode',
						filterable: false,
						class: 'fixed'
					},
					{
						text: '项目名称',
						align: 'center',
						value: 'citemname',
						filterable: false,
						class: 'fixed'
					}, {
						text: '类型',
						align: 'center',
						value: 'type',
						filterable: false,
						class: 'fixed'
					},
					{
						text: '类型名称',
						align: 'center',
						value: 'typename',
						filterable: false,
						class: 'fixed'
					}
			],
			projectDataList: [],
			projectLoading: false,
			projectTotalCount: 0,
			projectOptions: { //页数
				page: 1,
				//每页行数
				itemsPerPage: 10
			},
			vuetifyDefaultPage: {
				'items-per-page-text': '每页个数',
				'items-per-page-options': [10, 20, 50, 100]
				// 'items-per-page-all-text': '100'
			},
			
			selectprojectModel: null
		}),
		watch: {
			projectComment: {
				handler(newVal) {
					
					this.$emit('update:projectComment', newVal)
					this.loadPages()
				},
				deep: true
			},
			projectOptions: {
				handler() {
					this.loadPages()
				},
				deep: true
			},
		},

		methods: {
			async loadPages() {
				if (!this.projectComment.dialog) {
					return
				}
				this.projectLoading = true
				var response = await this.$httpRequest({
					url: this.projectComment.loadprojectUrl + `?
					code=${this.query.citemcode}&
					name=${this.query.citemname}&
					pageNumber=${this.projectOptions.page}&
					pageSize=${this.projectOptions.itemsPerPage}`,
					method: 'get',
				})
				if (response.status == 1) {
					this.projectDataList = response.data.result
					this.projectTotalCount = response.data.pagination.totalRecords
					this.projectLoading = false
				} else {
					this.$message.error(response.info)
				}
			},
			async refreshLoadPages() {
				this.query.citemcode = ''
				this.query.citemname = ''
				this.loadPages()
			},
			projectSingleCheckEvent(select) {
				if (select.value) {
					this.selectprojectModel = select.item
				} else {
					this.selectprojectModel = null
				}
			},
			ok() {
				this.$props.callBack(this.selectprojectModel)
				this.close()
			},
			close() {
				this.selectprojectModel = null
				this.projectComment.dialog = false
			},
		},
	}
</script>

<style>
</style>
